<template>
    <div>
        <!-- 搜索栏 -->
        <van-row class="row0">
            <van-col span="1"></van-col>
            <van-col span="3">
                <van-icon name="arrow-left" @click="backhome" />
            </van-col>
            <van-col span="16">
                <van-icon name="search" /><input type="text" v-model="searchmusic" placeholder="搜索音乐名">
            </van-col>
            <van-col @click="getsearchlist" span="3">搜索</van-col>
            <!-- <van-col span="3">搜索</van-col> -->
            <van-col span="1"></van-col>
        </van-row>
        <!-- 导航标签 -->
        <van-tabs v-model:active="active">
            <van-tab title="综合"></van-tab>
            <van-tab title="单曲"></van-tab>
            <van-tab title="歌单"></van-tab>
            <van-tab title="视频"></van-tab>
            <van-tab title="歌手"></van-tab>
            <van-tab title="博客"></van-tab>
        </van-tabs>
        <!-- 播放按钮 -->
        <div class="small-title">
            <!-- <button class="all-btn" @click="getAll"> -->
            <button class="all-btn" >
                <van-icon name="play-circle" color="#EC4141" size="20" />&nbsp;&nbsp;播放全部
            </button>
            <van-icon name="wap-nav" size="20" />
        </div>

        <div class="songSteet">
            <van-list>
                <van-cell v-for="item, index in list" :key="index" @click="onSongId(item.id)">
                    <!-- {{ item.name }} - {{ ar[index].join('/') }} - {{item.al.name}} -->
                    {{ item.name }} - {{ ar[index].join('/') }} - {{item.album.name}}
                    <!-- <van-icon name="video-o" @click.stop="showMV(item.id)"/> -->
                    <van-icon class="more" name="ellipsis" @click="show = true" />
                    <van-action-sheet v-model:show="show" @select.stop="onSelect">
                        <div class="songCart">
                            &nbsp;&nbsp;<span>歌曲：{{ item.name }} - {{ ar[index].join('/') }}</span>
                        </div>
                        <van-list>
                            <van-cell><van-icon name="close" />&nbsp;&nbsp;&nbsp;不感兴趣</van-cell>
                            <van-cell><van-icon name="music-o"/>&nbsp;&nbsp;&nbsp;下一首播放</van-cell>
                            <van-cell><van-icon name="certificate" />&nbsp;&nbsp;&nbsp;收藏到歌单</van-cell>
                            <van-cell><van-icon name="down" />&nbsp;&nbsp;&nbsp;下载</van-cell>
                            <van-cell><van-icon name="chat-o" />&nbsp;&nbsp;&nbsp;评论</van-cell>
                            <van-cell><van-icon name="share-o" />&nbsp;&nbsp;&nbsp;分享</van-cell>
                            <van-cell><van-icon name="contact" />&nbsp;&nbsp;&nbsp;歌手：{{ ar[index].join('/') }}</van-cell>
                            <van-cell><van-icon name="idcard" />&nbsp;&nbsp;&nbsp;专辑：{{ item.album.name }}</van-cell>
                            <van-cell><van-icon name="warning-o" />&nbsp;&nbsp;&nbsp;屏蔽歌手或歌曲</van-cell>
                        </van-list>
                    </van-action-sheet>
                </van-cell>
            </van-list>
        </div>

    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { RequestSearch } from "@/api/search"
import { RequestAllMV } from '@/api/homeFind';
import { ref } from 'vue'
import { Toast } from 'vant';
import router from '@/router';


// 回到首页
const backhome = ()=>{
    console.log(1);
    router.push({path:'/search'})
}
// 选中第几个导航
const active = ref(1);

// 获取搜索数据
const route = useRoute()
let msg: string = String(route.params.msg)
// console.log(msg)
let searchmusic = ref("")
searchmusic.value = msg
// console.log(searchmusic.value)
// msg = searchmusic.value

// 调用搜索接口
let list = ref([])
let ar = ref([])
const getsearchlist = async () => {
    msg = searchmusic.value
    let res = await RequestSearch(msg)
    // console.log(res.data.result.songs)
    list.value = res.data.result.songs
    console.log(list)
    // ar.value = list.value.map(item => {
    //     return  item.ar.map(item => {
    //             return item.name
    //         })
    //     })
    ar.value = list.value.map(item => {
        return  item.artists.map(item => {
                return item.name
            })
        })
    // console.log(res.data.result.songs[0])
    // console.log(ar.value);
    
}
getsearchlist()
const onSongId =(id: number) => {
    router.push({
        name:'musicdetail',query: {id: id, msg: searchmusic}
    })
}


const show = ref(false);
const onSelect = (item:any) => {
    // 默认情况下点击选项时不会自动收起
    // 可以通过 close-on-click-action 属性开启自动收起
    show.value = false;
    Toast(item.name);
};


// // mv
// const showMV = async (id: number, area = "全部", limit = 1000) => {
//     console.log(id)
//     let allMVData = await RequestAllMV(area, limit)
//     const { code, data } = allMVData.data
//     let res = data.find(item => {
//         // console.log(item.playCount, id)
//         item.playCount == id
//     })
//     console.log(res)
//     // console.log(allMVData)
// }
</script>

<style scoped lang="scss">
.row0 {
    background-color: white;
    margin-top: 20px;
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.5rem;

    input {
        width: 90%;
        height: 0.7rem;
        line-height: 0.7rem;
        border: none;
        border-radius: 0.7rem;
        background-color: rgb(247, 247, 247);
    }
}

.small-title {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    .all-btn {
        outline: none;
        border: none;
        background: white;
        font-size: 14px;
        display: flex;
        align-items: center;
    }

}
.songSteet {
    .more {
        float: right;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    .songCart{
        height: 50px;
        padding: 5px 16px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #F1F3F4;
    }
}

</style>